<template>
  <div class="content_card">
    <UHeader>
      <template slot="left">
        <el-input
          v-model="searchParams.like"
          :closable="true"
          size="small"
          clearable
          style="width: 200px"
          placeholder="请输入内容"
          @clear="searchParams = Object.assign({}, searchParams, searchParams)">
          <i slot="prefix" class="el-input__icon el-icon-search"/>
        </el-input>
        <el-button size="mini" type="success" style="margin-right: 15px;margin-left: 15px" @click="searchParams = Object.assign({}, searchParams, searchParams)" >查询</el-button>
      </template>
      <div slot="right">
        <el-button type="success" size="mini" @click="openDialog">开放区域</el-button>
      </div>
    </UHeader>
    <div>
      <ul class="city_index">
        <li v-for="(item,index) in cityIndexs " :class="{'select':searchParams.cityIndex===item.value}" :key="index" in city-indexs- @click="onSelectCity(item)">{{ item.label }}</li>
      </ul>
    </div>
    <!--<UTable ref="mTable" :search-api="search" :config="config" :columns="columns" :search-params="searchParams" />-->
    <div>
      <ul class="data-warp">
        <template v-if="citys.length>0">
          <li v-for="(item,index) in citys" :key="index">
            <section class="data-list">
              <div class="data-item">
                <span class="city_name">{{ item.cityName }}<span>({{ item.adecode }})</span></span>
                <div class="data-des">
                  <span title="创建时间"><span class="iconfont icon-shijian icon"/>2012-12-11 </span>
                  <span title="承认商入驻"><span class="iconfont icon-shangjiarenzheng icon"/>0</span>
                  <span title="订单数量"><span class="iconfont icon-dingdan icon"/>0</span>
                  <el-switch
                    v-model="item.enable"
                    active-value="OPEN"
                    inactive-value="CLOSE"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="onEnableChange(item)"/>
                </div>
              </div>
              <div style=" display: flex; justify-items: center; justify-content: left; align-items: center;">
                <div class="car_tyes">
                  <el-tag
                    v-for="(tag,i ) in item.carTypes"
                    :key="i"
                    size="small"
                    type="info"
                    closable
                    @close="onDeletCarType(item,tag)">
                    {{ tag.typeName }}
                  </el-tag>
                </div>
                <div>
                  <div style="justify-content: center; display: flex;align-items: center">
                    <el-button size="mini" circle icon="el-icon-setting" type="primary" title="设置收费标准"/>
                    <el-button size="mini" circle icon="el-icon-circle-plus" type="success" title="增加车型" />
                    <el-button :type="item.hot===1?'primary':''" size="mini" icon="el-icon-star-off" circle title="设为热门城市" @click="onHotButClick(item)" />
                    <el-button size="mini" type="danger" icon="el-icon-delete" circle title="删除"/>
                  </div>

                </div>
              </div>

            </section>
          </li>
        </template>

        <li v-else class="notData">
          <span>暂无数据</span>
        </li>
      </ul>
    </div>
    <el-dialog :visible.sync="showDialog" :append-to-body="true" :close-on-click-modal="false" title="选择开放城市" width="800px">
      <el-steps :active="stepsActive" align-center finish-status="success">
        <el-step title="选择城市" description="选择需要开放的地区"/>
        <el-step title="设置收费" description="设置各车型的收费标准"/>

      </el-steps>
      <div style="margin-top: 15px">
        <CitySelect v-if="stepsActive===1" ref="cityView"/>
        <div v-if="stepsActive===2">
          <el-alert
            title="温馨提示"
            type="info"
            description="该配制会同步到所有的车型,如果不需要请点击省略并保存"/>
          <UTable :columns="feescalColums" :auto-load-data="false" :config="{border: true,defaultClass:true}" :local-data="localData" />
        </div>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 60%" @click="onNext">{{ stepsActive!==2?'下一步':'保存' }}</el-button>
        <el-button v-if="stepsActive===2" type="danger" style="width: 120px;margin-left: 60px" @click="onSaveCity(false)">省略并保存</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
import UHeader from '@/components/UHeader'
import CitySelect from '@/components/CitySelect'
import UTable from '@/components/UTable'
import { getCityInfo, saveCityConfig, switchHotCity, switchEnable } from '@/api/city'
import columns from './columns'

export default {
  components: {
    UTable, UHeader, CitySelect
  },
  data() {
    return {
      localData: [{ defalutKm: 0.00, exceedPrice: 0.00, wideCityPrice: 0.00, interCityPrice: 0.00 }],
      feescalColums: [
        { prop: 'defalutKm', label: '有效里程数', type: 'edit' },
        { prop: 'exceedPrice', label: '超出价格', type: 'edit' },
        { prop: 'wideCityPrice', label: '同城起步价', type: 'edit' },
        { prop: 'interCityPrice', label: '城际起步价', type: 'edit' }
      ],
      tags: ['标签一', '标签一'],

      cityIndexs: [
        { label: '热门城市', value: 'Hot' },
        { label: 'A', value: 'A' },
        { label: 'B', value: 'B' },
        { label: 'C', value: 'C' },
        { label: 'D', value: 'D' },
        { label: 'E', value: 'E' },
        { label: 'F', value: 'F' },
        { label: 'G', value: 'G' },
        { label: 'H', value: 'H' },
        { label: 'Y', value: 'Y' },
        { label: 'J', value: 'J' },
        { label: 'K', value: 'K' },
        { label: 'L', value: 'L' },
        { label: 'N', value: 'N' },
        { label: 'M', value: 'M' },
        { label: 'O', value: 'O' },
        { label: 'P', value: 'P' },
        { label: 'Q', value: 'Q' },
        { label: 'R', value: 'R' },
        { label: 'S', value: 'S' },
        { label: 'Z', value: 'Z' },
        { label: 'U', value: 'U' },
        { label: 'V', value: 'V' },
        { label: 'W', value: 'W' },
        { label: 'X', value: 'X' }

      ],
      citys: [],
      selectCitys: [],
      searchParams: { cityIndex: 'Hot', open: true },
      columns: columns,
      editForm: {},
      showDialog: false,
      stepsActive: 1
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    onEnableChange(item) {
      if (item.enable === 'CLOSE') {
        this.$confirm('是否确认关闭该区域', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          switchEnable(item.id).then(res => {
            this.localData()
          })
        }).catch(() => {
          item.enable = 'OPEN'
        })
      } else {
        switchEnable(item.id).then(res => {
          this.localData()
        })
      }
    },
    onHotButClick(item) {
      switchHotCity(item.id).then(res => {
        item.hot = item.hot === 1 ? 0 : 1
      })
    },
    onDeletCarType(item, carType) {
      this.$confirm('是否确认删除该车型.该操作会禁止该类车型配送业务', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        item.carTypes = item.carTypes.filter(res => {
          if (res.typeId !== carType.typeId) {
            return true
          }
          return false
        })
      })
    },
    loadData() {
      getCityInfo(this.searchParams).then(res => {
        this.citys = res
      })
    },
    defalutLocalData() {
      return [{ defalutKm: 0.00, exceedPrice: 0.00, wideCityPrice: 0.00, interCityPrice: 0.00 }]
    },
    openDialog() {
      this.stepsActive = 1
      this.showDialog = true
      this.localData = this.defalutLocalData()
    },
    onSaveCity(isMore) {
      var data = {
        cityIds: this.selectCitys
      }
      if (isMore) {
        data.feescal = this.localData[0]
      }
      saveCityConfig({ params: JSON.stringify(data) }).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.showDialog = false
        this.$refs.mTable.refresh()
      })
    },
    onSelectCity(item) {
      this.searchParams.cityIndex = item.value
      this.loadData()
    },
    onNext() {
      switch (this.stepsActive) {
        case 1:
          this.selectCitys = this.$refs.cityView.getSelect()
          if (this.selectCitys.length === 0) {
            this.$message({
              message: '请选择城市',
              type: 'warning'
            })
            return
          }
          this.stepsActive += 1
          break
        case 2:
          this.onSaveCity(true)
          break
      }
    }

  }
}
</script>

<style scoped>
  .city_index{
    width: 100%;
    border-style: solid;
    border-color:#e4e7ed ;
    height: 35px;
    border-width: 0px 0px 1px 0px
  }
  .city_index li{
      cursor: pointer;
      float: left;
      color: #666;
      padding: 0px 15px;
      height: 35px;
      line-height: 35px;
      text-align: center;
      border-style: solid;
      border-color: #e4e7ed;
      border-width: 0px 1px 0px 0px
  }
  .city_index li.select{
    background: #FAC400;
    color: #01020a;
  }
  .city_index li:hover{
    background: #ebeef5;
    color: #01020a;

  }
  .data-warp{
    width: 100%;
  }
  .data-warp li{
    width: 100%;
    width: 100%;
    padding:8px 10px;
    background: white;
    border-bottom: 1px solid #ebeef5;
  }
  .data-warp li .data-list{
    width: 100%;
  }
 .data-warp li .data-list  .data-item{
    display: flex;
    margin-top: 5px;
    justify-items: center;
    align-items: center;
  }
  .data-warp li .data-list .data-item .city_name{
    color: #01020a;
    font-size: 18px;
    font-weight: 400;
    display: block;
    flex: 1;
  }
  .data-warp li .data-list .data-item .data-des span{
     padding: 0px 5px;
  }
  .data-conten{
    display: flex;
    justify-content: stretch;
    align-items: center;
  }

  .car_tyes{
    margin:15px 80px 15px 15px;
    flex: 1;
  }
  .car_tyes span{
     margin:5px 0px 0px 5px;
  }

  .notData{
    min-height: 300px;
    border: 0px solid !important;
    text-align: center;

  }
  .notData span{
     margin-top: 150px;
    display: block;
  }
</style>
